<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="../constom/js/hammer.v2.0.8.js"></script>
    <script src="../constom/js/zepto.min.v1.1.6.js"></script>
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="a1" id="a1">
    <div class="aa1" ><img id="s2" src="1.jpg" alt=""/></div>

</div>
<script>
    var a=10;
    var Deom=document.getElementById("a1");
    var hammerDeom= new Hammer(Deom);
    hammerDeom.on("swipe",function(){
        a++;

        var i = a;
        var s = i.toString();

        console.log(s);
        $("#s2").attr("src",s+".jpg");
        console.log(a);
        if(a>=14){
            a=10;
        }

    });

</script>
</body>
</html>